﻿<template>
    <div v-cloak class="hidden-x bg-light">
        <component is="style" />
        <div class="flex-row padding-6 bg-white">
            <van-icon name="arrow-left" :class="[prevMonth.disabled?'color-gray':'color-blue']" v-on:click="!prevMonth.disabled&&goto(0,prevMonth.date)">{{prevMonth.m}}</van-icon>
            <div class="flex-row-fill text-center">
                <span class="bold">{{currentMonth.m}}</span>
                <van-icon name="location-o" class="color-blue" v-on:click="goto(1,currentMonth.date)">今天</van-icon>
            </div>
            <span :class="[nextMonth.disabled?'color-gray':'color-blue']" v-on:click="!nextMonth.disabled&&goto(2,nextMonth.date)">{{nextMonth.m}}<van-icon name="arrow"></van-icon></span>
        </div>
        <div class="flex-row bg-light">
            <div class="h100 padding-left-4" style="visibility:hidden;"><van-icon name="arrow-left" class="color-999" /></div>
            <div class="flex-row-fill">
                <van-grid :column-num="7" class="bg-light weekTitles">
                    <van-grid-item v-for="w in weekTitles" :text="w" class="bg-light"></van-grid-item>
                </van-grid>
            </div>
            <div class="h100 padding-left-4" style="visibility:hidden;"><van-icon name="arrow" class="color-999" /></div>
        </div>
        <div class="flex-row bg-white">
            <div class="h100 padding-left-4" v-on:click="weekSwipe(0)"><van-icon name="arrow-left" class="color-999" /></div>
            <van-swipe ref="vanswipe" :show-indicators="false" :loop="false" :initial-swipe="current" :touchable="true">
                <van-swipe-item v-for="item in weeks">
                    <van-grid clickable :column-num="7" :border="false" class="contentGrid">
                        <van-grid-item v-for="it in item.list" :class="[it.date==date?'custom-grid-item':!!it.IsNew?'custom-IsNew':'']" v-on:click="!!it&&!!it.date&&changeSelected(it)">
                            <div v-if="list.find(function (item) { return item.aDate== it.date })" style="display: flex; position: absolute; font-size: 12px !important; color: #f37b1d !important; right: 5px; top:0;">
                                课
                            </div>
                            <div class="bold color-333">{{it.day}}</div>
                        </van-grid-item>
                    </van-grid>
                </van-swipe-item>
            </van-swipe>
            <div class="h100 padding-left-4" v-on:click="weekSwipe(1)"><van-icon name="arrow" class="color-999" /></div>
        </div>
        @*<othon-a></othon-a>*@
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'week-calendars',
            props: {
                value: {
                    type: String,
                    'default': function () {
                        return hxt.dateFormat("yyyy-MM-dd");
                    }
                },
                list: {
                    type: Array,
                    'default': function () {
                        return [];
                    }

                },
            },
            data: function () {
                return {
                    optor: hxt.store.optor,
                    weekTitles: ['日', '一', '二', '三', '四', '五', '六'],
                    weeks: [],
                    current: 0,
                };
            },
            watch: {

            },
            computed: {
                date: {
                    get: function () {
                        return hxt.dateFormat("yyyy-MM-dd", !!this.value ? this.value : null);
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                },
                currentMonth: function () {
                    return {
                        m: hxt.dateFormat("yyyy年MM月", this.date),
                        date: hxt.dateFormat("yyyy-MM-dd", this.date),
                    };
                },
                prevMonth: function () {
                    return {
                        m: hxt.dateFormat('M月', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        date: hxt.dateFormat('yyyy-MM-dd', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        disabled: hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd')) > hxt.dateAdd('M', 0, this.date)
                    };
                },
                nextMonth: function () {
                    return {
                        m: hxt.dateFormat('M月', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        date: hxt.dateFormat('yyyy-MM-dd', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        disabled: hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd')) < hxt.dateAdd('M', 0, this.date)
                    };
                }
            },
            activated: function () {

            },
            mounted: function () {
                var _this = this;
                _this.weeks = _this.groupDates(hxt.dateConfig(_this.date));
                var idx = _this.weeks.findIndex(function (item) { return item.IsNew });
                _this.current = idx > 0 ? idx : 0;
                console.log(_this.weeks, _this.current)
            },
            methods: {
                weekSwipe: function (type) {
                    var _this = this;
                    if (type == 0) {
                        if (_this.current == 0) return;
                        _this.current -= 1;
                    }
                    if (type == 1) {
                        if (_this.current >= _this.weeks.length-1) return;
                        _this.current += 1;
                    }
                },
                groupDates: function (dateConfig) {
                    var groups = [], _this = this;
                    startDate = hxt.toDate(dateConfig.monthBegin);
                    endDate = hxt.toDate(dateConfig.monthEnd);
                    dateList = [];
                    for (var i = 0; i < dateConfig.monthDays; i++) {
                        dateList.push({
                            date: hxt.dateFormat("yyyy-MM-dd", new Date(dateConfig.year, dateConfig.month - 1, i +
                                1)),
                            day: new Date(dateConfig.year, dateConfig.month - 1, i + 1).getDate(),
                            IsNew: false
                        });
                    };
                    while (startDate < endDate) {
                        var group = [], day = startDate.getDay(), IsNew = false;
                        for (var i = 0; i < 7; i++) {
                            if (i < day) {
                                group.push({});
                                continue;
                            };
                            if (startDate <= endDate) {
                                var obj = dateList.find(function (item) { return item.date == hxt.dateFormat("yyyy-MM-dd", startDate) });
                                obj.IsNew = false;
                                if (startDate.getTime() == hxt.toDate(hxt.dateFormat("yyyy-MM-dd")).getTime()) obj.IsNew = true;
                                group.push(obj);
                                if (startDate.getTime() == hxt.toDate(hxt.dateFormat("yyyy-MM-dd", _this.date)).getTime()) IsNew = true;
                                //console.log(hxt.dateFormat("yyyy-MM-dd", startDate), hxt.dateFormat("yyyy-MM-dd", _this.date))
                                startDate.setDate(startDate.getDate() + 1);
                            } else {
                                group.push({});
                            };
                        };
                        groups.push({ list: group, IsNew: IsNew });
                    };
                    return groups;
                },
                goto: function (type, date) {//0上一月 1今天 2下一月
                    var _this = this, date = type == 1 ? hxt.dateFormat("yyyy-MM-dd") : hxt.dateFormat("yyyy-MM-dd", date);
                    _this.date = date;
                    _this.weeks = _this.groupDates(hxt.dateConfig(date));
                    _this.$nextTick(function () {
                        var idx = _this.weeks.findIndex(function (item) {
                            return item.IsNew
                        });
                        _this.current = idx > 0 ? idx : 0;
                    });
                    _this.$emit('click', date);
                },
                changeSelected: function (g) {
                    var _this = this;
                    _this.date = g.date;
                }
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .bold {
        font-weight: bold;
    }

    .custom-grid-item .van-grid-item__content {
        background-color: #cce6ff !important;
    }

    .custom-IsNew .van-grid-item__content .bold {
        /*background-color: #d2f1f0 !important;*/
        color: #3ea3ff !important;
    }

    .weekTitles .van-grid-item__content {
        background-color: #f7f7f8 !important;
    }

        .weekTitles .van-grid-item__content .van-grid-item__text {
            font-size: 14px;
            font-weight: 700;
            color: #3ea3ff;
        }
</style>